<template>
  <view class="phxx-item">
    <view class="phxx-item-content" style="position: relative;">
      <view class="status-item-box" :class="{'gray-type': itemList.status == 3 || itemList.status == 4,'orange-type': itemList.status == 1,'blue-type': itemList.status == 2,
								'status': true}">{{ itemList.statusName}}</view>
      <view class="body-box">
        <view class="bottom">
          <view class="items">
            <text class="til">运价</text>
            <text class="val">{{ itemList.freight || 0}}元/吨</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items">
            <text class="til">执行时间</text>
            <text class="val">{{ itemList.exetime.slice(0,-3) || ''}}</text>
          </view>
        </view>
        <view class="bottom" v-if="!!itemList.endTime">
          <view class="items">
            <text class="til">结束时间</text>
            <text class="val">{{ itemList.etime || ''}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items">
            <text class="til">操作人</text>
            <text class="val">{{ itemList.operatorName || '' }}</text>
          </view>
        </view>
      </view>
      <view class="bottom-btn" >
        <view>
          <button class="cancelBtn" size="mini" @click.stop="oncancelFun(itemList)">作废</button>
        </view>
      </view>
    </view>
    <!-- 作废 -->
    <uni-popup ref="confirmDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="否" confirmText="是" :title="titleName" content="您确认要作废该条价格信息吗？"
        @confirm="dialogConfirm"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  import {
    toast
  } from '@/utils/common';
  import config from '@/config';
  import {
    cancelreservaPrice
  } from '@/api/tranplan.js';
  export default {
    name: 'row-number',
    props: {
      itemList: {
        type: Object,
        default: {
          vehicleNo: '',
          driverName: '',
          queueStatusName: '',
          customerName: '',
          coalSubtypeName: '',
          loadingSiteName: '',
          queueTime: '',
          callNumberTime: ''
        }
      },
      authriotyFlagVoilation: {
        type: Boolean,
        default: false
      },
      authriotyFlagBlck: {
        type: Boolean,
        default: false
      },
      authriotyFlagupd: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        transStatusLists: [],
        transId: undefined
      }
    },
    computed: {
      imagesPath() {
        if (this.$store.state.user.curTypeColor == "#D22C2C") {
          return config.baseImgUrl + '/code1.png'
        } else if (this.$store.state.user.curTypeColor == "#409EFE") {
          return config.baseImgUrl + '/code.png'
        } else {
          return config.baseImgUrl + '/code.png'
        }
      }
    },
    onShow() {

    },
    methods: {
      oncancelFun(item) {
        this.transId = item.id
        this.$refs['confirmDialog'].open();
      },
      async dialogConfirm() {
        let res = await cancelreservaPrice(this.transId)
        if (res.code == 0) {
          toast("作废成功")
          this.$refs['confirmDialog'].close();
          this.$emit('manualCalling');
        } else {
          toast(res.msg)
        }
      },
    }
  };
</script>

<style lang="scss" scoped>


</style>